<template>
  <div class="app-container home">
    <div v-for="dept in recordStatList">
      <div class="div-block salary-block" style="width: 710px;" >
        <div class="title">{{dept.deptName}} 订单统计</div>
        <el-row>
          <el-col class="col-salary" style="width: 80px;">时间</el-col>
          <el-col class="col-salary" style="width: 80px;">收款现金</el-col>
          <el-col class="col-salary" style="width: 80px;">收款刷卡</el-col>
          <el-col class="col-salary" style="width: 80px;">技师现金</el-col>
          <el-col class="col-salary" style="width: 80px;">技师刷卡</el-col>
          <el-col class="col-salary" style="width: 80px;">小费</el-col>
          <el-col class="col-salary" style="width: 80px;">优惠金额</el-col>
          <el-col class="col-salary" style="width: 80px;">收款总额</el-col>
        </el-row>
        <el-row v-for="item in dept.resVoList">
          <el-col class="col-salary" style="width: 80px;">{{item.staticProject}}</el-col>
          <el-col class="col-salary" style="width: 80px;">{{item.totalCashAmount}}</el-col>
          <el-col class="col-salary" style="width: 80px;">{{item.totalCardAmount}}</el-col>
          <el-col class="col-salary" style="width: 80px;">{{item.techCashAmount}}</el-col>
          <el-col class="col-salary" style="width: 80px;">{{item.techCardAmount}}</el-col>
          <el-col class="col-salary" style="width: 80px;">{{item.tipsCardAmount}}</el-col>
          <el-col class="col-salary" style="width: 80px;">{{item.discountAmount}}</el-col>
          <el-col class="col-salary" style="width: 80px;">{{item.totalCashAmount+item.totalCardAmount}}</el-col>
        </el-row>

      </div>
      <div class="div-block salary-block" style="width: 270px;">
        <div class="title">{{dept.deptName}} 数量统计</div>
        <el-row>
          <el-col class="col-salary" style="width: 69px;">统计项</el-col>
          <el-col class="col-salary">新增</el-col>
          <el-col class="col-salary">核查</el-col>
          <el-col class="col-salary">未核查</el-col>
        </el-row>
       <el-row v-for="item in dept.resVoList">
         <el-col class="col-salary" style="width: 69px;">{{item.staticProject}}</el-col>
         <el-col class="col-salary">{{item.totalNum}}</el-col>
         <el-col class="col-salary">{{item.checkNum}}</el-col>
         <el-col class="col-salary">{{item.unCheckNum}}</el-col>

       </el-row>

      </div>
    </div>
    <div>
      <div  class="div-block">
        <div class="block">
            <span class="demonstration">查询日期</span>
            <el-date-picker
                  value-format="yyyy-MM-dd"
                  v-model="dateValues"
                  type="daterange"
                  @change="querystatistics"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
          </div>
      </div>
      <div style="display: flex;">
        <div class="div-block salary-block" style="width: 40%;">
          <div class="title">最受欢迎的项目</div>
          <div>
            <el-table v-loading="projectLoading" :data="projectRankPage">
              <el-table-column prop="projectName" label="项目名称"></el-table-column>

              <el-table-column prop="projectNum" label="数量" width="90"></el-table-column>
              <el-table-column prop="projectAmount" label="总金额" width="90"></el-table-column>
            </el-table>
            <pagination
                  v-show="projectRankTotal>10"
                  :total="projectRankTotal"
                  :page.sync="projectPage.pageNum"
                  :limit.sync="projectPage.pageSize"
                  @pagination="queryProjectRankPage"
                />
          </div>
        </div>
        <div class="div-block salary-block" style="width: 40%;">
            <div class="title">销售最高</div>
            <div>
              <el-table v-loading="projectLoading" :data="userRankPage">
                <el-table-column prop="userName" label="用户名称"></el-table-column>
                <el-table-column prop="deptName" label="部门名称"></el-table-column>
                <el-table-column prop="userAmount" label="总金额" width="90"></el-table-column>
              </el-table>
              <pagination
                    v-show="userRankTotal>10"
                    :total="userRankTotal"
                    :page.sync="userPage.pageNum"
                    :limit.sync="userPage.pageSize"
                    @pagination="queryUserRankPage"
                  />
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { findSalarystatistics,findProjectRankPage,findUserRankPage } from "@/api/index";
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      recordStatList: [],
      dateValues:[],
      projectPage:{
        pageNum:1,
        pageSize:10,
        startDate:0,
        endDate:0
      },
      userPage:{
        pageNum:1,
        pageSize:10,
        startDate:0,
        endDate:0
      },
      projectRankPage:[],
      projectRankTotal:0,
      projectLoading:false,
      userRankPage:[],
      userRankTotal:0,
      userLoading:false,
    };
  },
  created() {
    this.querySalarystatistics();
    let date = new Date();
    let startDate = new Date(date.getTime()-6*24*3600*1000);
    this.dateValues[0]=this.fromatDate(startDate);
    this.dateValues[1]=this.fromatDate(date);
    this.queryUserRankPage();
    this.queryProjectRankPage();
  },
  methods: {
    querySalarystatistics() {
      findSalarystatistics().then(res=>{
          this.recordStatList = res;
      });
    },
    fromatDate(date){
      return date.getFullYear() +'-'+(date.getMonth()+1)+"-"+date.getDate();
    },
    querystatistics(e){
     this.queryUserRankPage();
     this.queryProjectRankPage();
    },
    queryProjectRankPage(){
      if(null != this.dateValues && this.dateValues.length>0){
        this.projectPage.startDate =this.dateValues[0]+" 00:00:00";
        this.projectPage.endDate =this.dateValues[1]+" 23:59:59";
      }
      this.projectLoading = true;
      findProjectRankPage(this.projectPage).then(res=>{
        this.projectRankPage = res.data;
        this.projectRankTotal = res.total;
        this.projectLoading = false;
      })
    },
    queryUserRankPage(){
      if(null != this.dateValues && this.dateValues.length>0){
        this.projectPage.startDate =this.dateValues[0]+" 00:00:00";
        this.projectPage.endDate =this.dateValues[1]+" 23:59:59";
      }
      this.userLoading = true;
      findUserRankPage(this.projectPage).then(res=>{
          this.userRankPage = res.data;
          this.userRankTotal = res.total;
          this.userLoading = false;
      })
    }
  }
};
</script>

<style scoped lang="scss">
  .home{
    background-color: #f7faff;
    width: 1280px;
    min-height: 600px;
  }
  .div-block{
    background-color: #ffffff;
		display: flex;
		border-radius: 4px;
		flex-wrap: wrap;
		margin-top: 10px;
    padding: 6px;
    box-shadow: 0 0 8px 1px rgb(0,0,0,0.06);
  }
  .salary-block{
    width: 30%;
    padding-left: 10px;
    margin: 5px;
    display: inline-block;
    .title{
      text-align: center;
    }
  }
  .col-salary{
    width: 60px;
  }
// .home {
//   blockquote {
//     padding: 10px 20px;
//     margin: 0 0 20px;
//     font-size: 17.5px;
//     border-left: 5px solid #eee;
//   }
//   hr {
//     margin-top: 20px;
//     margin-bottom: 20px;
//     border: 0;
//     border-top: 1px solid #eee;
//   }
//   .col-item {
//     margin-bottom: 20px;
//   }

//   ul {
//     padding: 0;
//     margin: 0;
//   }

//   font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
//   font-size: 13px;
//   color: #676a6c;
//   overflow-x: hidden;

//   ul {
//     list-style-type: none;
//   }

//   h4 {
//     margin-top: 0px;
//   }

//   h2 {
//     margin-top: 10px;
//     font-size: 26px;
//     font-weight: 100;
//   }

//   p {
//     margin-top: 10px;

//     b {
//       font-weight: 700;
//     }
//   }

//   .update-log {
//     ol {
//       display: block;
//       list-style-type: decimal;
//       margin-block-start: 1em;
//       margin-block-end: 1em;
//       margin-inline-start: 0;
//       margin-inline-end: 0;
//       padding-inline-start: 40px;
//     }
//   }
// }
</style>

